<template>
	<section>
		<!--start header-->
		<header>
			<div class="main clearfix">
				<router-link to="/" class="logoA fl">
					<img src="../../assets/img/云商蓝.png" style="margin-top: 8%" height="70%" width="90" alt="云商"/>
				</router-link>
				<div class="fr">
					<div class="exit fr" @click ='quit'>
						<span class="iconfont">&#xe631;</span>
						<span >返回</span>
					</div>
					<div class="account fr">
						<span class="iconfont">&#xe632;</span>
						<span>您好,{{memberOperatorViewVo.operatorName}}</span>
					</div>
				</div>
			</div>
		</header>
		<!--end header-->
		<!--start content-->
		<div class="wrap">
			<div class="content main">
				<ul>
					<li class="borderB grade clearfix">
						<span class="fl">账号安全级别：</span>
						<div class="fl">
							<el-rate
							  class="gradeIcon font30"
							  v-model="grade"
							  :max="5"
							  disabled
							  show-text
							  allow-half
							  disabled-void-color="#b7b7b7"
							  text-color="#ff9900"
							  :text-template="value">
							</el-rate>
						</div>
					</li>
					<li class="borderB title">
						<p>密码管理</p>
					</li>
					<li :class="{green:!passIfSeted}" class="liContent passLi clearfix borderR4 blue">
						<span class="icon fl"></span>
						<span class="text">密码强度：</span>
						<div class="fl pro">
							<el-progress :percentage="prog" :show-text="false" class="progress"></el-progress>
						</div>
						<span class="text">中</span>
						<el-button type="primary" class="fr rightBtn" @click="showDialogBtn('pass')">{{passBtnText}}</el-button>
					</li>
					<li class="borderB title">
						<p>
							密保工具
							<span class="redFont">（先绑定手机之后才可进行邮箱绑定）</span>
						</p>
					</li>
					<li :class="{green:!phoneIfSeted}" class="liContent encryptedLiPhone clearfix borderR4 blue">
						<span class="icon fl"></span>
						<span class="text fl">绑定手机：随时随地，掌握账号安全。</span>
						<el-button type="primary" class="fr rightBtn" @click="showDialogBtn('phone')">{{phoneBtnText}}</el-button>
						<span class="text fr redFont">已绑定</span>
					</li>
					<li v-if="false" :class="{green:!mailboxIfSeted}" class="liContent encryptedLiMailbox clearfix borderR4  blue">
						<span class="icon fl"></span>
						<span class="text fl">绑定邮箱：绑定邮箱以便您接收通知及找回密码。</span>
						<el-button type="primary" class="fr rightBtn" @click="showDialogBtn('mailbox')">{{mailboxBtnText}}</el-button>
						<span class="text fr redFont">未绑定</span>
					</li>
				</ul>
			</div>
		</div>
		<!--end content-->
		<!--start footer-->
		<footer class="clearfix" >
			<div class="main">
        <p>云商-移动供应链电商平台</p>
				<!--<span class="fl">上海高达星软件系统有限公司</span>-->
				<!--<span class="fr">沪备案</span>-->
			</div>
		</footer>
		<!--end footer-->
		<!--start dialog-->
		<transition name="fade">
		<dialog-box v-show="'close'!=showDialogCom" class="animated" :class="{rollIn:'close'!=showDialogCom,rollOut:'close'==showDialogCom}">
			<span slot="title">{{title}}</span>
			<div class="contentD" slot="content" v-if='"pass"==showDialogCom'>
				<ul>
					<li>
						<input type="password" v-model="pass.oldPass" @keyup="passRulesFn(pass.oldPass,'old')" name="" class="txt"  placeholder="旧密码" />
					</li>
					<li>
						<input type="password" v-model="pass.newPass" @keyup="passRulesFn(pass.newPass,'new')" name="" class="txt"  placeholder="新密码" />
					</li>
					<li>
						<input type="password" v-model="pass.repetitionPass" @keydown.enter="updatePass" @keyup="passRulesFn(pass.repetitionPass,'repetition')" name="" class="txt"  placeholder="确认密码" />
					</li>
					<li class="noMargin">
						<input type="text" name="" class="info"  :value="info" />
					</li>
					<li>
						<input type="button" name="" @click="updatePass" class="btn"  value="确认" />
					</li>
				</ul>
			</div>
			<div class="contentD" slot="content" v-else-if='"phone"==showDialogCom'>
				<!--<ul v-if="phoneOld">
					<li>
						<input type="text" disabled name="" class="txt disabled"  :placeholder="userOldPhone" />
					</li>
					<li class="code" :class="{active:hoverBorder}">
						<input type="text" name="" class="txt" @mouseenter="hoverBorder=true" @mouseleave="hoverBorder=false"  placeholder="输入验证码" /><span>获取验证码</span>
					</li>
					<li class="noMargin">
						<input type="text" name="" class="info"  :value="info" />
					</li>
					<li>
						<input type="button" name="" @click="nextFn('phone')" class="btn"  value="下一步" />
					</li>
				</ul>-->
				<ul v-if="phoneOld">
					<li>
						<input type="text" name="" v-model="vue_phone_newPhone" class="txt"  placeholder="新手机号" />
					</li>
					<li class="code" :class="{active:hoverBorder}">
						<input @keyup.enter="updatePhone" type="text" name="" class="txt" v-model="vue_phone_verifyCode" @mouseenter="hoverBorder=true" @mouseleave="hoverBorder=false" placeholder="输入验证码" /><span :class="{gray:showGray}" @click="sendPhoneVerifyCode">{{vue_phone_verifyBtnTet}}</span>
					</li>
					<li class="liInfo">
						<span>绑定后可以通过手机号码进行登录，便于您找回密码，提高账号安全性。</span>
					</li>
					<li class="noMargin">
						<input type="text" name="" class="info"  :value="info" />
					</li>
					<li>
						<input type="button" name="" class="btn" @click="updatePhone"  value="确定" />
					</li>
				</ul>
			</div>
			<div class="contentD" slot="content" v-else-if='"mailbox"==showDialogCom'>
				<ul v-if="mailboxOld">
					<li>
						<input type="text" disabled name="" class="txt disabled"  :placeholder="userOldMailbox" />
					</li>
					<li class="code" :class="{active:hoverBorder}">
						<input type="text" name="" class="txt" @mouseenter="hoverBorder=true" @mouseleave="hoverBorder=false"  placeholder="输入验证码" /><span>获取验证码</span>
					</li>
					<li class="noMargin">
						<input type="text" name="" class="info"  :value="info" />
					</li>
					<li>
						<input type="button" name="" @click="nextFn('mailbox')" class="btn"  value="下一步" />
					</li>
				</ul>
				<ul v-else>
					<li>
						<input type="text" name="" class="txt"  placeholder="新邮箱" />
					</li>
					<li class="code" :class="{active:hoverBorder}">
						<input type="text" name="" class="txt" @mouseenter="hoverBorder=true" @mouseleave="hoverBorder=false"  placeholder="输入验证码" /><span>获取验证码</span>
					</li>
					<li class="noMargin">
						<input type="text" name="" class="info"  :value="info" />
					</li>
					<li>
						<input type="button" name="" class="btn"  value="确定" />
					</li>
				</ul>
			</div>
		</dialog-box>
		</transition>
		<!--end dialog-->
	</section>
</template>


<script>
import dialogBox from '../../components/dialog/dialog';

	export default {
	    data() {
	      return {
          showGray:false,
	        grade: 3.9,
	        prog:70,
	        passIfSeted:true,
	        phoneIfSeted:true,
	        mailboxIfSeted:false,
	        phoneOld:"",
	        mailboxOld:"",
	        info:"",
	        hoverBorder:false,
	        type:"",
	        canIAjax:false,
	        userOldPhone:"手机",
	        userOldMailbox:"邮箱",
	        pass:{
	        	oldPass:"",
	        	newPass:"",
	        	repetitionPass:""
	        },
	        rules:{
	        	pass:this.Public.rules.password,
//	        	pass:/(?!^[0-9]+$)(?!^[A-Z]+$)(?!^[a-z]+$)^[A-Za-z0-9]{6,20}$/,
	        	phone:this.Public.rules.phone
	        },
	        vue_phone_newPhone:"",  //新手机号
	        vue_phone_verifyCode:"",  //新手机号的验证码
	        vue_phone_verifyBtnTet:"获取验证码",  //修改手机号的btn按钮
	        vue_phone_verifyBtn:true,  //修改手机号的btn按钮可以点击
	        vue_phone_countDown:null,  //定时器
	        memberOperatorViewVo:{}
	      }
	    },
	    computed:{
	    	value(){
	    		return this.grade*20+"分"
	    	},
	    	title(){
	    		if("pass"==this.$store.state.showDialog){
	    			//判断是否设置过pass
	    			return true?"修改密码":"设置密码";
	    		}else if("phone"==this.$store.state.showDialog){
	    			//判断是否设置过phone
	    			return true?"更换新手机":"设置手机";
	    		}else if("mailbox"==this.$store.state.showDialog){
	    			//判断是否设置过mailbox
	    			return false?"更换邮箱":"绑定邮箱";
	    		}
	    	},
	    	showDialogCom(){
	    		return this.$store.state.showDialog
	    	},
	    	passBtnText(){
	    		return this.passIfSeted?"修改":"设置";
	    	},
	    	phoneBtnText(){
	    		return this.phoneIfSeted?"修改":"设置";
	    	},
	    	mailboxBtnText(){
	    		return this.mailboxIfSeted?"修改":"设置";
	    	}
	    },
	    methods:{
	    	nextFn(way){
	    		if("phone"==way){
	    			//在这里进行旧手机的校验
	    			this.phoneOld = false;
	    		}else if("mailbox"==way){
	    			//在这里进行旧邮箱的校验
	    			this.mailboxOld = false;
	    		}
	    	},
			//右上角成功提示
			openSuccess(msg) {
		        this.$notify({
		          message: msg,
		          type: 'success',
		          duration:3000
		        });
      		},
      		//右上角失败提示
			openError(msg) {
		        this.$notify({
		          message: msg,
		          type: 'error',
		          duration:3000
		        });
      		},
	    	showDialogBtn(val){
	    		this.$store.commit('newShowDialog',val);
	    		this.type = val;
	    	},
	    	passRulesFn(val,type){
	    		if("old"==type){
	    			if(""==this.pass.repetitionPass){
	    				this.info = this.rules.pass.test(val)?"":"旧密码格式错误(包含字母、数字、符号任意类型的6-20位字符集合)";
	    				this.canIAjax = false;
	    			}else{
	    				if(!this.rules.pass.test(val)){
	    					this.info = "旧密码格式错误(包含字母、数字、符号任意类型的6-20位字符集合)";
	    					this.canIAjax = false;
	    				}else{
	    					if(this.pass.repetitionPass==this.pass.newPass){
	    						if(this.pass.repetitionPass==val){
	    							this.info = "新密码不能跟旧密码一样";
	    							this.canIAjax = false;
	    						}else{
	    							this.info = "";
	    							this.canIAjax = true;
	    						}
	    					}else{
	    						this.info = "重复新密码错误";
	    						this.canIAjax = false;
	    					}
	    				}
	    			}
	    		}else if("new"==type){
	    			if(""==this.pass.repetitionPass){
	    				this.info = this.rules.pass.test(val)?"":"新密码格式错误(包含字母、数字、符号任意类型的6-20位字符集合)";
	    				this.canIAjax = false;
	    			}else{
	    				if(!this.rules.pass.test(val)){
	    					this.info = "新密码格式错误(包含字母、数字、符号任意类型的6-20位字符集合)";
	    					this.canIAjax = false;
	    				}else{
	    					if(this.pass.repetitionPass==this.pass.newPass){
	    						if(this.pass.repetitionPass==this.pass.oldPass){
	    							this.info = "新密码不能跟旧密码一样";
	    							this.canIAjax = false;
	    						}else{
	    							this.info = "";
	    							this.canIAjax = true;
	    						}
	    					}else{
	    						this.info = "重复新密码错误";
	    						this.canIAjax = false;
	    					}
	    				}
	    			}
	    		}else if("repetition"==type){
	    			if(""==this.pass.oldPass){
	    				this.info = "旧密码不能为空";
	    				this.canIAjax = false;
	    			}else{
	    				if(this.pass.newPass==val){
	    					if(this.pass.repetitionPass==this.pass.oldPass){
    							this.info = "新密码不能跟旧密码一样";
    							this.canIAjax = false;
    						}else{
    							this.info = "";
    							this.canIAjax = true;
    						}
	    				}else{
	    					this.info = "重复新密码错误";
	    					this.canIAjax = false;
	    				}
	    			}
	    		}
	    	},

	    	updatePass(){
	    		//if(this.canIAjax){
	    			this.canIAjax = false;
					this.axios({
	  					method: 'PUT',
	  					url: '/v3/member/operators/'+this.md5(this.pass.oldPass).toUpperCase()+'/'+this.md5(this.pass.newPass).toUpperCase()+'/updatePasswordPlatOperator',
						data:{}
					}).then((res) => {
						if(res.data.state == res.data.success){
			    				this.Public.openSuccess(this,"操作成功！");
			    				this.$store.commit('newShowDialog',"close");
			    			}else{
			    				this.info=res.data.msg;
			    				this.openError("操作失败");
			    			};
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					});
				/*}else{
		    		this.info = "请正确填入密码";
		    	}*/
	    	},
	    	
			//发送验证码
	    	sendPhoneVerifyCode(){
	    		if(this.vue_phone_verifyBtn){
		    		if(this.vue_phone_newPhone){
		    			if(this.rules.phone.test(this.vue_phone_newPhone)){
		    				this.info="";
		    				this.axios({
		    					method:"PATCH",
		    					url:"/v3/basic/members/"+this.vue_phone_newPhone+"/sendPhoneVerifyCode"
		    				}).then((res)=>{
		    				  this.showGray = true;
		    					this.vue_phone_verifyBtn = false;
		    					let num = 60;
		    					this.vue_phone_countDown = setInterval(()=>{
		    						this.vue_phone_verifyBtnTet = num+"后重新获取";
		    						num--;
		    						if(num<=-1){
                    					 this.showGray = false;
    									clearInterval(this.vue_phone_countDown);
		    							this.vue_phone_verifyBtnTet = "重新获取";
		    							this.vue_phone_verifyBtn = true;
		    						}
		    					},1000)
		    				}).catch((err)=>{
                  				this.showGray = false;
		    					this.vue_phone_verifyBtn = true;
		    					this.Public.openError(this,err.response.data)
		    				})
		    			}else{
		    				this.info="请输入有效的手机号"
		    			}
		    		}else{
		    			this.info="请输入新手机号"
		    		}
	    		}
	    	},
	    	
	    	//绑定手机号
	    	updatePhone(){  
	    		if(this.vue_phone_newPhone){
	    			if(this.rules.phone.test(this.vue_phone_newPhone)){
		    			if(this.vue_phone_verifyCode){
		    				this.axios({
		    					method:"PATCH",
		    					url:"/v3/basic/members/"+this.vue_phone_newPhone+"/"+this.vue_phone_verifyCode+"/updatePhone"
		    				}).then((res)=>{
                				this.showGray = false;
		    					this.Public.openSuccess(this,"操作成功！");
		    					this.$store.commit('newShowDialog',"close");
    							this.vue_phone_verifyBtn = true;
    							this.vue_phone_newPhone="";
    							this.vue_phone_verifyCode="";
    							if(this.vue_phone_countDown)clearInterval(this.vue_phone_countDown);
    							this.vue_phone_verifyBtnTet="获取验证码";
		    				}).catch((err)=>{
		    					this.Public.openError(this,err.response.data);
		    					this.$store.commit('newShowDialog',"close");
    							this.vue_phone_newPhone="";
    							this.vue_phone_verifyCode="";
    							if(this.vue_phone_countDown)clearInterval(this.vue_phone_countDown);
    							this.vue_phone_verifyBtnTet="获取验证码";
		    				})
			    		}else{
			    			this.info="请输入验证码"
			    		}
	    			}else{
	    				this.info="请输入有效的手机号"
	    			}
	    		}else{
	    			this.info="请输入新手机号"
	    		}
	    	},
	    	quit(){
          window.history.go(-1)
//				this.$confirm('确认退出？', '确认', {
//		          confirmButtonText: '确定',
//		          cancelButtonText: '取消',
//		          cancelButtonClass:"fr",
//		          confirmButtonClass:"fr",
//		          customClass:"clearfixBox"
//		        }).then(() => {
//		          //点击确定的回调
//		          this.axios({
//		          	method:"POST",
//		          	url:"/v3/member/logout"
//		          }).then((res)=>{
//		          	this.$router.push({path:"/login"})
//		          }).catch((err)=>{
//		          	this.Public.openError(this,err.response.data)
//		          })
//		        }).catch(() => {
//		          //点击取消的回调
//		        });
			}
	    },
	    watch:{
	    	showDialogCom:function(val,oldval){
	    		document.querySelector('body').style.cssText = "close"!=val?'background:#fff;overflow: hidden;':'background:#fff;overflow: auto;';
	    	},
	    	phoneIfSeted:function(val,oldval){
	    		return val?true:false;
	    	},
	    	mailboxOld(){
	    		return this.mailboxIfSeted?true:false;
	    	}
	    },
	    components:{dialogBox},
	    mounted(){
	    	//这里请求接口判断用户信息的状态，如：是否有绑定过手机
        document.title = "云商-移动供应链电商平台";
	    	this.phoneOld = true;
	    	this.mailboxOld = false;
	    	this.userOldPhone = "189******75";
	    	this.userOldMailbox = "nid*****@126.com";
	    	this.prog = 40;
	    	this.grade = 1.3;

	    	document.querySelector('body').style.cssText = 'background:#fff';

	    	this.axios({
				method: 'GET',
				url: "/v3/member/operators"
			}).then((res) => {
				this.memberOperatorViewVo = res.data;
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			});
	    },
	    destroyed(){
        document.title = "云商";
	    	document.querySelector('body').style.cssText = 'background:#E9ECF3';
	    }
  	}
</script>

<style scoped>
  .gray{
    background: #dddddd!important;
    color: white!important;
  }

	*{
		transition:.2s;
	}
 header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 50px;
 	line-height: 50px;
 	background-color:#32383E;
 	z-index: 999;
 }
 .main {
 	width: 1000px;
 	margin:auto;
 }
  .main p{
    text-align: center;
  }
 .logoA {
 	height: 50px;
 }
 .exit,.account {
 	color:#fff;
 	cursor: pointer;
 	transition: .2s;
 	vertical-align:middle;
 }
 .exit span,.account span{
 	vertical-align:middle;
 }
 .exit:hover,.account:hover {
 	color:#03B8CC;
 }
 .exit {
 	margin-left: 40px;
 }
 .wrap {
 	margin: 80px 0 110px 0;
 }
 .content {
 	border: 1px solid #EEEEEE;
 	box-shadow: 0 0 3px #32383E;
 	padding: 30px;
 	background: #fff;
 }
 .borderB {
 	border-bottom:1px solid #ccc;
 }
 .grade {
 	padding: 20px 0;
 	font-size: 28px;
 }
 .title {
 	padding: 15px 0;
 	margin-top: 50px;
 	font-size: 18px;
 }
 .liContent {
 	padding: 20px 0;
 }
 .passLi .icon {
 	display: block;
 	width: 100px;
 	height: 100px;
 	border-radius: 4px;
 	overflow: hidden;
 	margin-right: 20px;
 	background: #03B8CC url('../../assets/img/safety.png') 0 0 no-repeat;
 }
 .passLi .text{
 	display: block;
 	float: left;
 	height: 100px;
 	line-height: 100px;
 	margin-left: 5px;
 	font-size: 14px;
 }
 .passLi .pro {
	width: 60%;
 	height: 100px;
 	line-height: 100px;
 }
 .progress {
 	margin-top: 50px;
 	transform: translate(0,-50%);
 }
 .rightBtn {
 	margin-top: 50px;
 	transform: translate(0,-50%);
 }
 .redFont {
 	font-size: 16px;
 	color: red;
 }
 .encryptedLiPhone .icon {
 	display: block;
 	width: 100px;
 	height: 100px;
 	border-radius: 4px;
 	overflow: hidden;
 	margin-right: 20px;
 	background: #45CBA8 url('../../assets/img/safety.png') -100px 0 no-repeat;
 }
 .encryptedLiPhone .text{
 	display: block;
 	height: 100px;
 	line-height: 100px;
 	margin-right: 45px;
 	font-size: 16px;
 }
 .encryptedLiMailbox .icon {
 	display: block;
 	width: 100px;
 	height: 100px;
 	border-radius: 4px;
 	overflow: hidden;
 	margin-right: 20px;
 	background: #45CBA8 url('../../assets/img/safety.png') -200px 0 no-repeat;
 }
 .encryptedLiMailbox .text{
 	display: block;
 	height: 100px;
 	line-height: 100px;
 	margin-right: 45px;
 	font-size: 16px;
 }
 footer{
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	height: 80px;
 	line-height: 80px;
 	z-index: 999;
 	background: #fff;
 }


.contentD ul {
	padding: 30px 95px;
}
.contentD ul li {
	height: 70px;
	line-height: 70px;
}
.contentD ul li.noMargin {
	height: 50px;
	line-height: 50px;
}
.contentD ul li input{
	width: 100%;
	height: 50px;
	margin: 10px 0;
	line-height: 50px;
	box-sizing: border-box;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	font-size: 14px;
}
.contentD ul li input.txt{
	padding-left: 8px;
}
.contentD ul li input.info{
	border-width:0;
	margin: 0;
	color: red;
	font-size: 12px;
}
.contentD ul li input.btn{
	font-size: 22px;
	background: rgb(9, 159, 184);
	color: #fff;
	cursor: pointer;
	transition: .2s;
}
.contentD ul li input.btn:hover{
	background: rgb(75, 175, 190);
	color: #fff;
}
.contentD ul li.liInfo {
	height: 20px;
	line-height: 20px;
}



.contentD ul li.code {
	position: relative;
	border: 1px solid red;
	height: 50px;
	line-height: 50px;
	margin: 10px 0;
	padding: 0;
	border-radius: 4px;
	border: 1px solid #c9c9c9;
	vertical-align: middle;
	box-sizing: border-box;
}
.contentD ul li.code:after {
	content:"";
	position: absolute;
	width: 1px;
	height: 49px;
	top: 0;
	right: 25%;
	background: #c9c9c9;
}
.contentD ul li:not(.code) input.txt {
	transition: .4s;
}
.contentD ul li:not(.code) input.disabled {
	cursor: not-allowed;
}
.contentD ul li:not(.code) input.txt:hover:not(.disabled) {
	border: 1px solid #099fb8;
}
.contentD ul li.code input {
	width: 75%;
	height: 48px;
	line-height: 48px;
	box-sizing: border-box;
	font-size: 14px;
	vertical-align: middle;
	border: none;
	margin-top: 0px;
}
.contentD ul li.code span {
	display: inline-block;
	width: 25%;
	height: 100%;
	line-height: 48px;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	top: 0;
}
.contentD ul li.code.active  {
	border: 1px solid #099fb8;
}

/* start transition过渡 *
  .fade-enter-active, .fade-leave-active {
	transition: .4s;
	opacity: 1;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
/* end transition过渡 */
</style>
